<template>
  <div class="newsForm">
    <el-form :model="news" label-width="80px" :rules="addNewsrules">
      <el-form-item label="编号" prop="nid">
        <el-col :span="16">
          <el-input v-model="news.nid" placeholder="请填入编号"/>
        </el-col>
      </el-form-item>
      <el-form-item label="标题" prop="ntitle">
        <el-col :span="16">
          <el-input v-model="news.ntitle" placeholder="请填入标题"/>
        </el-col>
      </el-form-item>
      <el-form-item label="描述" prop="nionent">
        <el-col :span="16">
          <el-input type="textarea" :rows="5" v-model="news.nconent" placeholder="请输入描述" />
        </el-col>
      </el-form-item>
      <el-form-item label="管理员">
        <el-col :span="12">
          <el-select v-model="news.ano" placeholder="请选择管理员编号">
            <el-option v-for="(admin,index) in alladmin" :key="admin.ano" :label="admin.aName" :value="admin.ano"/>
          </el-select>
        </el-col>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="5">
        <span>&nbsp;</span></el-col>
      <el-col :span="6">
        <span><el-button type="primary" @click="addNews">发布新闻</el-button></span>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import api from "../../../../axios/api"
import rules from "../../../../static/js/validator/rules.js"
export default {
  name: "addNews",
  data() {
    return {
      addNewsrules:{ntitle:[{required:true,message:"标题不能为空",trigger:"blur"},{max:10,min:2,message:"长度不符合条件",trigger: "blur"},{trigger: "blur",validator:rules.FormValidate.Form().validateTitle}],
        nid:[{required:true,message:"编号不能为空",trigger:"blur"}]},
      news: {nid: "", ntitle: "", nconent:"", nimg:"",ano:""},
      alladmin: [{ano: 0, "aName": "001"}, {ano: 1, "aName": "002"}, {ano: 2, "aName": "003"}],
      dto:""
    }
  },
  methods: {
    addNews: function () {
      console.log( JSON.stringify(this.news));
      this.setDataFromAxios();
    },
    setDataFromAxios: function () {
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("http://chongxian-wang:9092/newsController/addNews", this.news, "post")
        .then(dto => {
          console.log(dto);
          this.dto=dto
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    }
  }
}
</script>

<style scoped lang="stylus">
.newsForm
  margin 0 auto
  width 1000px
  text-align left
</style>
